
<template>
  <el-select
    v-model="selectValue"
    multiple
    placeholder="请选择"
    collapse-tags
    @change="selectChange "
    @remove-tag="removeTag"
  >
    <el-option
      v-for="item in resetOptions"
      :key="item[opv]"
      :label="item[opl] "
      :value="item[opv]"
    />
  </el-select>
</template>

<script>
export default {

  name: 'SelectAll',
  props: {
    filterableFlag: {
      type: String,
      default: ''
    },
    //  下拉选择器的 备选项
    options: {
      type: Array,
      default: () => []
    },
    //  对应的el-options的value绑定的字段
    opv: {
      type: String,
      default: 'id'
    },
    allNot: {
      type: String,
      default: 'allno'
    },
    // label绑定的字段
    opl: {
      type: String,
      default: 'label'
    },
    modelOri: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectValue: [], // 当前子组件 v-model值
      isSelectAll: false, // 全选
      isIndeterminate: false, // 12
      notAllOptions: [], // 模糊查询后产生的新数据
      showAll: true, // 模糊查询后 是否显示全部备选项 默认为true,
      isNoSelectAll: false,
      lastTimeSelect: [],
      resetOptions:[]
    }
  },
 /* watch: {
    isSelectAll: {
      handler(val) {
        this.$emit('selectChange', this.selectValue)
      }
    }
    /!* isNoSelectAll: {
      handler(val) {
        console.log(this.selectValue)
        this.$emit('selectChange', this.selectValue)
      }
    },*!/
  },*/

  mounted() {
    const add = [
      {
        id: 'all',
        displayName: '全选',
        type: 'removeall'
      },
      {
        id: this.allNot,
        displayName: '全不选',
        type: 'removeall'
      }
    ]
    console.log(this.options)
    this.resetOptions = add.concat(this.options)
    if (this.modelOri.length > 0) {
      this.selectValue = this.modelOri
      this.selectChange(this.selectValue)
    }
  },
  methods: {
    removeTag(data) {
      if (data === 'all') {
        this.selectValue = []
      }
      console.log('=========removeTag======================')
      console.log(data)
    },
    selectChange(data) {
      /* console.log('======当前选择的=========================')
      console.log(data)
      console.log('======上次选择的=========================')
      console.log(this.lastTimeSelect)*/
      const isAdd = this.lastTimeSelect.length < data.length
      console.log('当前是增加：' + isAdd)
      // 当前改变的哪个值
      let changeData = null
      if (this.lastTimeSelect.length === 0) { // 类似第一次点击
        changeData = data[0]
      } else {
        const addArr = this.lastTimeSelect.length > data.length ? this.lastTimeSelect : data
        const removeArr = this.lastTimeSelect.length > data.length ? data : this.lastTimeSelect
        addArr.forEach(item => {
          if (removeArr.indexOf(item) === -1) {
            changeData = item
          }
        })
      }
      this.lastTimeSelect = [...data]
      // console.log(changeData)
      if (isAdd) {
        if (changeData === 'all') {
          const all = this.resetOptions.filter(item => item[this.opv] !== this.allNot)
          this.selectValue = all.map(item => item[this.opv])
          // this.lastTimeSelect = [...this.selectValue]
        } else if (changeData === this.allNot) {
          this.selectValue = [this.allNot]
          // this.lastTimeSelect = [this.allNot]
        } else {
          if (data.length === this.resetOptions.length - 2) {
            const all = this.resetOptions.filter(item => item[this.opv] !== this.allNot)
            this.selectValue = all.map(item => item[this.opv])
          } else {
            this.selectValue = data.filter(item => item !== this.allNot)
          }
        }
      } else {
        if (changeData === 'all') {
          this.selectValue = []
        } else if (changeData === this.allNot) {
          this.selectValue = []
        } else {
          this.selectValue = data.filter(item => item !== changeData && item !== 'all')
        }
      }

      this.lastTimeSelect = [...this.selectValue]

      this.$emit('selectData', this.selectValue)
    }

  }
}
</script>
<style scoped>

  .selectbox{
    padding-left: 18px;
  }
  .selectCheckBox .el-tag:first-child {
    max-width: calc(100% - 72px);
  }
  .el-icon-close {
    top: -7px;
  }
  .el-select__tags-text {
    display: inline-block;
    width: calc(100% - 18px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pop_select_down.is-multiple .el-select-dropdown__item {
    padding: 0 18px;
  }
  .pop_select_down.is-multiple .el-select-dropdown__list {
    padding-top: 0;
  }
  .pop_select_down.is-multiple .selectbox {
    display: block;
    height: 34px;
    line-height: 34px;
  }
  .pop_select_down.is-multiple .el-select-dropdown__item.selected::after {
    top: 0.05rem;
    left: 1.17rem;
    z-index: 1;
    font-weight: normal;
    color: #fff;
  }
  .pop_select_down.is-multiple .el-select-dropdown__item .check {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    margin-right: 10px;
    vertical-align: middle;
    border: 1px solid #656c7e;
    border-radius: 2px;
    transition: border-color 0.25s cubic-bezier(0.71, -0.49, 0.26, 1.46),
    background-color 0.25s cubic-bezier(0.71, -0.49, 0.26, 1.46);
  }
  .pop_select_down.is-multiple .el-select-dropdown__item.selected .check {
    background-color: #409EFF;
    border: 1px solid #409EFF;

  }
</style>

